<template lang="">
    <div>
        <van-nav-bar :title="research.title" />
        <van-tabs v-model:active="tab" @click-tab="onClickTab">
            <van-tab title="项目一览" name="base"></van-tab>
            <van-tab title="治疗方案" name="solution"></van-tab>
            <van-tab title="入组患者" name="patient"></van-tab>
            <van-tab title="参研人员" name="doc"></van-tab>
        </van-tabs>

        <div class="list">
              <div class="family" @click="goToDetail(patient.id)" v-for="(patient,index) in patients" :key="index">
                <van-image round width="4rem" height="4rem" 
                src="/static/img/girl.png" class="img" />
                <div>
                   <div class="family-top">
                      <div class="name">{{patient.name}}</div> 
                      <div class="age">{{patient.age}}岁</div> 
                      <div></div>
                   </div>
                   <div class="tag-list">
                      <div class="tag-sys" v-for="tag in patient.tags">{{tag}}</div>
                      <div class="tag" v-for="tag in patient.tags_other">{{tag}}</div>
                   </div>
                </div>
              </div>
         </div>
    </div>
</template>
<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getResearchDetail, getResearchPatient } from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();
        let id = 0;

        const research = reactive({
            id: 0,
            title: "",
            purpose: "",
            org: "",
            start_people: "",
            status: "",
            research_nums: "",
            patient_nums: "",
            files: "",
            researcher: "",
            researcher_img: "",
            researcher_org: "",
            doc_status: -2
        })
        const getResearch = () => {
            getResearchDetail({ id: id }).then(res => {
                log("dwd", res)
                if (res.status == 'ok') {
                    research.title = res.data.title;
                    research.purpose = res.data.purpose;
                    research.org = res.data.org;
                    research.start_people = res.data.start_people;
                    research.status = res.data.status;
                    research.research_nums = res.data.research_nums;
                    research.patient_nums = res.data.patient_nums;
                    research.files = res.data.files.split(",");
                    research.researcher = res.data.researcher;
                    research.researcher_img = res.data.researcher_img;
                    research.researcher_org = res.data.researcher_org;
                    research.doc_status = res.data.doc_status;
                } else {
                    showToast(res.msg)
                }
            })
        }

        const patients = ref([])
        const getData = () => {
            getResearchPatient({ id: id }).then(res => {
                if (res.status == 'ok') {
                    res.data.list.forEach((v, i) => {
                        res.data.list[i]['tags'] = v.tags.split(",");
                        res.data.list[i]['tags_other'] = v.tags_other.split(",");
                    })
                    patients.value = res.data.list
                }
                showToast(res.msg);
            })
        }
        onMounted(() => {
            id = route.params.id ? route.params.id : 0
            if (!id) {
                router.push("/MyKy")
            } else {
                getData()
                getResearch()
            }
        })
        const tab = ref('patient')
        const onClickTab = ({ title, name }) => {
            if (name == 'base') {
                router.push("/KyDetail/" + id)
            }
            if (name == 'solution') {
                router.push("/KySolution/" + id)
            }
            if (name == 'doc') {
                router.push("/KyDoc/" + id)
            }
        };
        const otherProject = () => {
            router.push("/OtherKy")
        }
        const goToDetail = (id) => {
            router.push("/KyDetail/" + id)
        }
        const createProjectDoc = () => {

        }
        return {
            tab,
            onClickTab,
            patients,
            research,
            otherProject,
            goToDetail,
            createProjectDoc
        }
    }
}
</script>
<style scoped>
.list {
    background: #F5F7FB;
    margin-bottom: 7 0px;
    height: 89vh;
    overflow-y: scroll;
}

.top-list {
    padding: 12px;
    font-size: 18px;
    color: #1C2023;
    font-weight: 250;
}

.top-item {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #E3E4E5;
    padding: 3vw;
    margin-bottom: 10px;
}

.top-left {
    font-size: 16px;
    width: 20%;
    margin-right: 2%;
}

.top-right {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 78%;
}

.top-tag {
    display: flex;
    flex-direction: row;
}

.family {
    background: #FFFFFF;
    padding: 12px;

    display: flex;
    flex-direction: row;
    align-items: center;
}

.img {
    margin-right: 15px;
}

.family-top {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.name {
    font-size: 17px;
    margin-right: 10px;
    color: #1C2023;
    font-weight: 250;
}

.age {
    font-size: 14px;

}

.tag-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}

.tag {
    border: 1px solid #49B9AD;
    background: #EAFEFA;
    border-radius: 10px;
    padding: 1px 8px;
    margin-right: 10px;
    font-size: 13px;
}

.tag-sys {
    border: 1px solid #FA541C;
    background: #FFF2E8;
    border-radius: 10px;
    padding: 1px 8px;
    margin-right: 10px;
    font-size: 13px;
}
</style>